<script setup lang="ts">


import {getInvoiceTrackById} from "@/api/invoiceController.ts";
import {onMounted, ref} from "vue";

const props = defineProps({
  invoiceId: {
    type: String,
    default: ''
  }
})
const data = ref({
  track: []
})
const getHistory = () => {
  getInvoiceTrackById(props.invoiceId).then(res => {
    data.value.track = res || []
  })
}

const map = {
  'INIT': '发票任务创建',
  'ADDED': '发票已开票',
  'FINISHED': '发票已完成验收'
}

const mapColor = {
  'INIT': '',
  'ADDED': '',
  'FINISHED': '#00B42A'
}

onMounted(() => {
  getHistory()
})
</script>

<template>
  <div class="invoice-track">
    <a-timeline>
      <a-timeline-item :label="item.createTime" v-for="item in data.track" :dot-color="mapColor[item.status]">
        {{ item.status !== 'HANDLE' ? map[item.status] : item.payload }}
        <br />
        <div class="user-line">操作员：{{ item.user }}</div>
      </a-timeline-item>
    </a-timeline>
  </div>
</template>

<style scoped lang="scss">
.invoice-track {
  margin-left: 50px;
  .user-line {
    line-height: 20px;
    color: #999999;
    font-size: 12px;
  }
}
</style>